export function validateComposition(composition) {
  if (!composition) { return }
  const structure = ['SINGLE', 'LEFT_RIGHT', 'LEFT_CENTER_RIGHT', 'TOP_BOTTOM', 'TOP_MIDDLE_BOTTOM']
  const align = ['left', 'right', 'middle', 'top', 'center', 'bottom']
  const based = ['width', 'height']

  const rootKeys = ['structure', 'align', 'components'];
  if (!hasAllKeys(composition, rootKeys)) { console.log('no rootkey'); return false; }
  if (!structure.includes(composition.structure)) { console.log('structure err'); return false; }
  if (!align.includes(composition.align)) { console.log('align err'); return false; }

  const subKeys = ['SINGLE', 'LEFT', 'CENTER', 'RIGHT', 'TOP', 'MIDDLE', 'BOTTOM'];
  const { components } = composition
  if (!isStructueMatch(composition.structure, Object.keys(components))) { console.log('structure not match components keys'); return false; }
  if (!areKeysRight(components, subKeys)) { console.log(' direction err'); return false; }
  if (Object.keys(components).length < 1) { console.log(' blank components err'); return false; }

  const elemKeys = ['graphicId', 'size', 'based', 'margin', 'svgCode'];

  for (const key in components) {
    if (!hasAllKeys(components[key], elemKeys)) { console.log(' element keys err'); return false; }
    if (!isObjectHasValue(components[key])) { console.log(' element values err'); return false; }
  }
  return true;
}

function hasAllKeys(obj = {}, arr = []) {
  return arr.every(key => Object.keys(obj).includes(key));
}

function isStructueMatch(structure, componentKeys) {
  const directions = structure.split('_');
  const isMatch = directions.every(key => componentKeys.includes(key));
  if (!isMatch) { console.log(structure, componentKeys) }

  return isMatch
}

function areKeysRight(obj, arr) {
  const keys = Object.keys(obj);
  return keys.every(key => arr.includes(key));
}


function isObjectHasValue(obj) {
  for (const key in obj) {
    if (obj[key] === null || obj[key] === undefined) {
      return false;
    }
  }
  return true
}

const formData = {
  "structure": undefined,
  "align": "middle",
  "components": {
    "LEFT": {
      "graphicId": 1,
      "size": 0.5,
      "based": "height",
      "margin": "0 0 0 0",
      "svgCode": 'viewBox="0 0 300 300"',
    },
    "CENTER": {
      "graphicId": 2,
      "based": "height",
      "size": 1,
      "margin": "0 0 0 0.5",
      "svgCode": 'viewBox="0 0 800 800"',
    },
    "RIGHT": {
      "graphicId": 2,
      "based": "height",
      "size": 0.5,
      "margin": "0 0 0 0.5",
      "svgCode": 'viewBox="0 0 800 800"',
    }
  }
}

// const isComplete = validateComposition(formData);
// console.log(isComplete);
